import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";

import styles from "./index.module.scss";
import { Loading } from "react-vant";
import Comment from "@/components/Comment";
import LoadMore from "@/components/LoadMore";
import {
  // getCommentList,
  getHotCommentList,
  // getNewCommentList,
} from "@/api/songcomment/index";
import classNames from "classnames";
const SongComment = () => {
  const tabsList = [
    {
      text: "推荐",
      value: 1,
    },
    {
      text: "最热",
      value: 2,
    },
    {
      text: "最新",
      value: 3,
    },
  ];
  const { id, type } = useLocation().state;
  const [loading, setLoading] = useState<boolean>(true);
  const [currentTab, setCurrentTab] = useState<number>(1);
  const [commentList, setCommentList] = useState<CommentItem[]>([]);
  const [total, setTotal] = useState<number>(0);
  const [currentPage, setCurrentPage] = useState<number>(0);
  useEffect(() => {
    getHotCommentList({
      id: id,
      offset: currentPage,
      limit: 10,
      type: type,
    }).then((res) => {
      setCommentList((prevValue) => {
        return prevValue.concat(res.hotCommentList || []);
      });
      setTotal(res.total);
      setTimeout(() => {
        setLoading(false);
      }, 300);
    });

    return () => {};
  }, [currentPage, id, type]);

  const handleTabs = (value: number) => {
    setCurrentTab(value);
  };

  const more = () => {
    setCurrentPage((currentPage) => {
      return currentPage + 1;
    });
  };

  return (
    <div className={styles.SongComment}>
      {loading ? (
        <div className={styles.loading_wrap}>
          <Loading color="red" />
        </div>
      ) : (
        <div className={styles.SongCommentWrap}>
          <div className={styles.SongCommentHeader}>
            <div className={styles.title}>精彩评论</div>
            <div className={styles.info}>
              <div className={styles.total}>评论({total})</div>
              <div className={styles.tabs}>
                {tabsList.map((it, index) => {
                  return (
                    <div
                      className={classNames(
                        currentTab == it.value ? styles.currentTabs : ""
                      )}
                      key={index}
                      onClick={() => handleTabs(it.value)}
                    >
                      {it.text}
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
          <div className={styles.content}>
            <div className={styles.comment_wrap}>
              {currentTab == 1 ? <Comment commentList={commentList} /> : ""}
              {currentTab == 2 ? <Comment commentList={commentList} /> : ""}
              {currentTab == 3 ? <Comment commentList={commentList} /> : ""}
              <LoadMore
                isLoading={commentList.length >= total}
                more={() => more()}
              />
            </div>
          </div>
          <div className={styles.commentFooter}>
            <div className={styles.inputWrap}>
              <input type="text" placeholder="随乐而起，有爱评论" />
            </div>
            <div className={styles.sendWrap}>发送</div>
          </div>
        </div>
      )}
    </div>
  );
};

export default SongComment;
